<template>
    <div id="app">
        <div>
            <span>姓名:</span>
            <input type="text" v-model="name"/>
        </div>
        <div>
            <span>年龄:</span>
            <input type="number" v-model.number="age"/>
        </div>
        <div>
            <span>性别:</span>
            <select v-model="sex">
                <option value="男">男</option>
                <option value="女">女</option>
            </select>
        </div>
        <div>
            <button @click="add">添加/修改</button>
        </div>
        <div>
            <table border="1" cellpadding="10" cellspacing="0">
                <tr>
                    <th>序号</th>
                    <th>姓名</th>
                    <th>年龄</th>
                    <th>性别</th>
                    <th>操作</th>
                </tr>
                <tr v-for="(obj,index) in list" :key="obj.id">
                    <td>{{index+1}}</td>
                    <td>{{obj.name}}</td>
                    <td>{{obj.age}}</td>
                    <td>{{obj.sex}}</td>
                    <td>
                        <button  @click="del(obj.id)">删除</button>
                        <button  @click="edit(obj.id)">编辑</button>
                    </td>
                </tr>
            </table>
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            flag:'',
            name:'',
            age:0,
            sex:'男',
            list: [
                {
                    id: 10,
                    name: 'xm',
                    age: 10,
                    sex: '男',
                },
                {
                    id: 11,
                    name: 'xh',
                    age: 11,
                    sex: '女',
                },
                {
                    id: 12,
                    name: 'xhua',
                    age: 12,
                    sex: '男',
                },
            ],
        }
    },
    methods:{
        add(){
            if(this.flag===''){
                this.list.push({
                name:this.name,
                age:this.age,
                id:+new Date(),
                sex:this.sex
                })
            }else{
                this.flag.name=this.name,
                this.flag.age=this.age,
                this.flag.sex=this.sex
            }
           this.sex='男',
            this.name='',
            this.age=''
        },
        del(id){
      
    this.list=this.list.filter(item=>item.id!==id)
        },
        edit(id){
            const obj =this.list.find(item=>item.id===id)
            this.flag=obj
            const {name,age,sex}=obj
            this.name=name,
            this.age=age,
            this.sex=sex
        }
       
    }

}
</script>
